<template>
  <page class="home-page">
    <zui-header>
      <logo type="xiaoyanyun" href="/"></logo>
        <h4 class="zui-logo-text">
         |&nbsp;&nbsp;就医陪诊、院内陪护
         <br/>|&nbsp;&nbsp;健康服务管理服务商
        </h4>
         <div class="zui-rightcol" @click="openMenu" style="color: #0b8ba5;">◄目录►</div>
         <drop-list :config="configData" ref="droplist"></drop-list>
         <zui-button @click="onButtonClick('link')">联系我们</zui-button>
         <zui-button @click="onButtonClick('case')">典型案例</zui-button>
         <zui-button @click="onButtonClick('plan')">解决方案</zui-button>
         <zui-button @click="onButtonClick('service')">产品服务</zui-button>
         <zui-button @click="onButtonClick('home')">首页</zui-button>
    </zui-header>
    <div class="banner vivify fadeIn">
      <h1 class="vivify popIn">
        <span class="br">诊前约号，</span>代办问诊、送取结果、代办买药、全程陪护
      </h1>
      <h3 class="vivify popIn">理念为引领，陪诊为基础，服务为核心</h3>
    </div>
    <div class="nav clear">
      <a class="zhichou vivify popIn">
        <div class="watermark blue">平台</div>
        <logo type="zhongtai"></logo>
        <logo class="mobile" type="mzhichou"></logo>
        <h3>解决看病求医难题</h3>
        <h4>不用家人亲力亲为>></h4>
      </a>
      <a class="hr vivify popIn delay-200">
        <div class="watermark green">节约</div>
        <logo type="hr"></logo>
        <logo class="mobile" type="mhr"></logo>
        <h3>节约控制看病时间</h3>
        <h4>灵活·专业·快速·低价>></h4>
      </a>
      <a class="plus vivify popIn delay-400">
        <div class="watermark blue">保障</div>
        <logo type="plus"></logo>
        <logo class="mobile" type="mplus"></logo>
        <h3>保障平台无间断运营</h3>
        <h4>后顾无忧·看病就医一站式服务>></h4>
      </a>
    </div>
   <!-- <a class="join-zhichou" href="http://wx.zhichou.com/#/me/resume">
      我是牛人，入驻智筹 >>
    </a> -->
    <div class="service">
      <h1>
        专业互联网预约就医平台<br/>
        承担你的家庭健康任务
      </h1>
      <h3>
        自带救护车及其医护人员，随叫随到，迅速服务！
      </h3>
      <h4>
        诊前约号 | 代办问诊 | 送取结果 | 代办买药 | 全程陪护<br/>
        我们就是你的健康小卫士
      </h4>
    </div>
    <div class="features">
      <ul>
        <li>
          <img :src="feature1"/>
          <h4>尊享VIP陪诊</h4>
          <p>代替患者在医院内跑腿，例如：带患者排队，楼上楼下缴费，提取化验报告等。诊前指导，全程陪诊，代取结果，车接车送。</p>
        </li>
        <li>
          <img :src="feature2"/>
          <h4>全程陪诊</h4>
          <p>提供代理办理，进行排队，楼上楼下缴费，提取化验结果等服务。</p>
        </li>
        <li>
          <img :src="feature3"/>
          <h4>诊前约号</h4>
          <p>人工代办预约就诊号服务，线上代办预约就诊号服务。</p>
        </li>
        <li>
          <img :src="feature4"/>
          <h4>代办问诊</h4>
          <p>代替客户到机构与专家沟通客户需求及代开检查单等服务，获知报告结果等。</p>
        </li>
     </ul>
    </div>
    <!-- <div class="customer-case-logo">
       <img :src="companyLogo"/>
       <img class="mobile" :src="mcompanyLogo"/>
     </div> -->
     <div class="apply-hr">
       <h2>
         选择晨禾陪诊，选择优质服务
       </h2>
       <h4>
         多年的陪诊陪护经验，陪护人员均持证上岗、保证您的就医服务一切顺利
       </h4>
     </div>
    <zui-footer/>
  </page>
</template>
<script>
  import './less/home-page.less'
  import Logo from '../components/Logo'
  import Page from '../components/Page'
  import ZuiHeader from '../components/Header'
  import ZuiFooter from '../components/Footer'
  import ZuiButton from '../components/Button'
  import feature1 from '../assets/img/feature1.png'
  import feature2 from '../assets/img/feature2.png'
  import feature3 from '../assets/img/feature3.png'
  import feature4 from '../assets/img/feature4.png'
  import Util from '../Util'
  import DropList from 'vue-droplist'
  export default{
    components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton,DropList},
    data () {
      return {
        feature1: feature1,
        feature2: feature2,
        feature3: feature3,
        feature4: feature4,
        carouselPerPage: (Util.os.android || Util.os.iPhone) ? 1 : 2,
        configData : {
            position: {  // 设置显示位置，position
              top: '60px',
              right: '15px',
              bottom: '',
              left: ''
            },
            width: '40%', // 设置宽度
            list: [ // 设置下拉列表数据和对应的点击事件
              {text: '首页', action: this.gohome},
              {text: '产品服务', action: this.goservice},
              {text: '解决方案', action: this.goplan},
              {text: '典型案例', action: this.gocase},
              {text: '联系我们', action: this.golink}
            ]
        }
      }
    },
   methods: {
      onButtonClick: function (e) {
        if(e=="home"){
            this.$router.push({path:'/'})
        }else if(e=="service"){
            this.$router.push({path:'/service'})
        }else if(e=="plan"){
            this.$router.push({path:'/plan'})
        }else if(e=="case"){
            this.$router.push({path:'/case'})
        }else if(e=="link"){
            this.$router.push({path:'/link'})
        }else{
            this.$router.push({path:'/'})
        }
      },
      openMenu: function () {
       this.$refs.droplist.show()
      },
      gohome: function () {
       this.$router.push({path:'/'})
      },
      goservice: function () {
       this.$router.push({path:'/service'})
      },
      goplan: function () {
       this.$router.push({path:'/plan'})
      },
      gocase: function () {
       this.$router.push({path:'/case'})
      },
      golink: function () {
       this.$router.push({path:'/link'})
      },
    }

  }
</script>
